<style type="text/css">
	.percent-list {
		margin: 5px auto;
	}
</style>
<form action="" class="form-horizontal" role="form">

	<div class="form-group">
		<label class="col-sm-2 control-label">商城名称</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" name="name" placeholder="请输入商城名称" datatype="*" value="{$product.name}" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">联系电话</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" name="tel" placeholder="请输入联系电话" datatype="*" value="{$product.tel}" />
		</div>
	</div>
	<div class="form-group">
        <label class="col-sm-2 control-label">客服QQ</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" name="qq" placeholder="请输入客服QQ" datatype="*" value="{$product.qq}" />
            <span class="label label-info">在商城里唤起QQ即时聊天。请先在 <a href="http://shang.qq.com/v3/widget.html" target="_blank">QQ推广页面</a> 申请开通。</span>
        </div>
    </div>
	<div class="form-group">
		<label class="col-sm-2 control-label">关注链接</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" name="subscribe_url" placeholder="请输入关注链接" datatype="*" value="{$product.subscribe_url}" />
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">关注后客服消息提示内容</label>
		<div class="col-sm-3">
			<textarea name="subscribe_info" class="form-control" placeholder="请输入关注后客服消息提示内容">{$product.subscribe_info}</textarea>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">试用产品如何参加链接</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" name="try_url" placeholder="请输入试用产品如何参加链接" datatype="*" value="{$product.try_url}" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">网站Logo</label>
		<div class="col-sm-6">
			<div class="image-result-content">
				<img id="image-result" class="margin-bottom" src="{$product.logo}" style="width: 100px;" />
			</div>
			<input type="text" id="logo" name="logo" class="form-control margin-bottom" value="{$product.logo}" />
			<input type="file" name="file_upload" id="image_upload" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">网站描述</label>
		<div class="col-sm-3">
			<textarea name="description" class="form-control">{$product.description}</textarea>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">购买商品是否需要关注</label>
		<div class="col-sm-3">
			<input type="checkbox" name="buy_required_subscribe" {$product[ 'buy_required_subscribe']? "checked='checked'": ''} value="1" />
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">未关注提示内容</label>
		<div class="col-sm-3">
			<textarea name="unsubscribe_text" class="form-control">{$product.unsubscribe_text}</textarea>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">已关注提示内容</label>
		<div class="col-sm-3">
			<textarea name="subscribed_text" class="form-control">{$product.subscribed_text}</textarea>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">短信通知手机</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" name="sms_tel" placeholder="请输入短信通知手机" datatype="*" value="{$product.sms_tel}" />
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">分销信息显示方式</label>
		<div class="col-sm-3">{$product.openInBrowser} <span class="label label-warning">设置在浏览器中打开，会员个人中心的分销相关信息将在浏览器中才能查看。</span>
		</div>
	</div>
	
	<div class="form-group">
		<label class="col-sm-2 control-label">分佣金的方式
			<br/><span class="label label-info">设置分佣金的方式</span>
		</label>
		<div class="col-sm-5">
			{$product.rewardBonusType}
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">基础分成层级
			<br/><span class="label label-info">设置基础佣金分成的层级数，不超过10级</span>
		</label>
		<div class="col-sm-3">
			<input type="number" name="base_levels" class="form-control" id="base_levels" value="" placeholder="请输入1-10之间的数字" />
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">基础分成比例
			<br/><span class="label label-info">设置佣金分成比例(%) 如：50:30:20</span>
		</label>
		<div class="col-sm-4" id="base_percent">
			<div class="percent-container"></div>
			<div class="input-group percent-list">
				<div class="input-group-addon">总比例必须为 100</div>
				<input type="text" class="form-control reward_percent" name="reward_percent" readonly="readonly" value="{$product.reward_percent}" />
				<div class="input-group-addon">=</div>
				<input type="text" class="form-control reward_percent_total" name="reward_percent_total" readonly="readonly" value="" />
				<div class="input-group-addon">%</div>
			</div>

		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">金牌会员分成层级
			<br/><span class="label label-info">设置金牌会员佣金分成的层级数，不超过10级</span>
		</label>
		<div class="col-sm-3">
			<input type="number" name="dealer_levels" class="form-control" id="dealer_levels" value="" placeholder="请输入1-10之间的数字" />
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">金牌会员分成比例
			<br/><span class="label label-info">设置佣金分成比例(%) 如：50:30:20</span>
		</label>
		<div class="col-sm-4" id="dealer_percent">
			<div class="percent-container"></div>
			<div class="input-group percent-list">
				<div class="input-group-addon">总比例必须为 100</div>
				<input type="text" class="form-control reward_percent" name="reward_percent_dealer" readonly="readonly" value="{$product.reward_percent_dealer}" />
				<div class="input-group-addon">=</div>
				<input type="text" class="form-control reward_percent_total" name="reward_percent_total" readonly="readonly" value="" />
				<div class="input-group-addon">%</div>
			</div>

		</div>
	</div>
	
	<div class="form-group">
		<label class="col-sm-2 control-label">是否开启金牌会员折扣</label>
		<div class="col-sm-3">
			<input type="checkbox" name="discount_open" {$product['discount_open']?'checked="checked"':''} value="1" />
		</div>
	</div>

	<div class="form-group">
			<label class="col-sm-2 control-label">金牌会员折扣设置
				<br/><span class="label label-info">注：打折后的商品价格要高于总佣金</span>
			</label>
			<div class="col-sm-6" id="user-discount">
				<div class="form-group">
					<div class="col-sm-10 edit-list">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>直接下线人数达(≥)</th>
									<th>折扣(1-100)</th>
									<th>升为几级<br/>(当用户等级制开启后有效)</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$.fn.editList = function(cfg) {
				var defaultConfig = {};
				cfg = $.extend(defaultConfig, cfg);
				window.cfg = cfg;
				var _this = this;
				var toolObject = {
					'init': function() {
						if (!cfg['data'] || !cfg['data'].length) {
							cfg['data'] = [];
							this.insert({
								'number': 0,
								'discount': 100,
								'toLevel': 0
							}, 0, false);
						}
						$("tbody", _this).delegate(".add", "click", function() {
							var index = ($("tbody tr", _this).index($(this).parents("tr:eq(0)"))) + 1;
							toolObject.insert({
								'number': 0,
								'discount': 100,
								'toLevel': 0
							}, index, true);
						})
						$("tbody", _this).delegate(".del", "click", function() {
							var index = ($("tbody tr", _this).index($(this).parents("tr:eq(0)")));
							toolObject.remove(index, true);
						});
						this.render();
					},
					'insert': function(data, i, render) {
						cfg['data'].splice(i, 0, data);
						render && this.render();
					},
					'remove': function(i, render) {
						cfg['data'].splice(i, 1);
						render && this.render();
					},
					'render': function() {
						$("tbody", _this).html("");
						var html = [
							'<tr id="jq-#id#">',
							'<td><input id="number" name="user_discount[#i#][number]" type="number" class="form-control answer" value="#number#"/></td>',
							'<td><input id="discount" name="user_discount[#i#][discount]" type="text" class="form-control answer" value="#discount#"/></td>',
							'<td><input id="toLevel" name="user_discount[#i#][toLevel]" type="text" class="form-control answer" value="#toLevel#"/></td>',
							'<td><a class="add">+</a> / <a class="del">-</a></td>',
							'</tr>'
						];
						for (var i = 0; i < cfg['data'].length; i++) {
							var rd = parseInt(Math.random() * 9999);
							rd = rd < 1000 ? 1000 + rd : rd;
							var id = new Date().getTime() + '' + rd;
							var d = cfg['data'][i];
							var h = html.join('').replace(/#i#/g, i, h).replace(/#id#/g, rd, h).replace(/#number#/g, d['number'], h).replace(/#discount#/g, d['discount'], h).replace(/#toLevel#/g, d['toLevel']?d['toLevel']:0, h);
							$(h).appendTo($("tbody", _this));
							$("#jq-" + rd).find("#number").bind("keyup change", ((function(d) {
								return function() {
									d['number'] = $(this).val();
								}
							})(d)));
							$("#jq-" + rd).find("#discount").bind("keyup change", ((function(d) {
								return function() {
									d['discount'] = $(this).val();
								}
							})(d)));
							$("#jq-" + rd).find("#toLevel").bind("keyup change", ((function(d) {
								return function() {
									d['toLevel'] = $(this).val();
								}
							})(d)));
						}
					}
				};
				toolObject.init();
			};
			var discount = {: json_encode($product['user_discount'] ? $product['user_discount'] : array())
			};
			$(".edit-list").editList({
				'data': discount
			});
		</script>
	
	<foreach name="product['level_config']" item="lc">
		<div class="form-group">
			<label class="col-sm-2 control-label">{$lc['name']}是否开启等级制</label>
			<div class="col-sm-3">
				{$lc['radioOption']}
			</div>
		</div>
	</foreach>

	<div class="form-group">
		<label class="col-sm-2 control-label">成为金牌会员最低销费</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" name="dealer_min_sells" value="{$product.dealer_min_sells}" />
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">微佣金最低提现额度</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" name="min_withdraw" value="{$product.min_withdraw}" />
		</div>
	</div>
<!--
	<div class="form-group">
		<label class="col-sm-2 control-label">是否开启捐赠功能<br /><span class="label label-info">在商品管理中设置捐赠金额。</span></label>
		<div class="col-sm-3">
			{$product.donate_on}
		</div>
	</div>-->

	<div class="form-group">
		<label class="col-sm-2 control-label">版权声明</label>
		<div class="col-sm-3">
			<input type="text" class="form-control" name="copyright" value="{$product.copyright}" />
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">状态</label>
		<div class="col-sm-3">{$product.status}</div>
	</div>

	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-8">
			<input type="hidden" name="id" value="{$product.id}" /> <a class="btn btn-default" onclick="javascript:history.go(-1)">返回上页</a>
			<a class="btn btn-default" onclick="self.location=document.referrer">返回上页并刷新</a>
			<button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/save">保存更改</button>
		</div>
	</div>
</form>

<script type="text/javascript">
	$(function() {
		var defaultPercent = [
			[100],
			[70, 30],
			[60, 30, 10],
			[50, 25, 15, 10],
			[45, 25, 15, 10, 5]
		];
		var setPercent = function(levelsId, settingId) {
			var oRewardLevels = $(levelsId);
			var oSetting = $(settingId);
			var oRewardPercent = oSetting.find(".reward_percent");
			var oRewardPercentTotal = oSetting.find(".reward_percent_total");
			var oPercentListContainer = oSetting.find(".percent-container");
			var baseLevelArray = oRewardPercent.val().split(":");
			var baseLevelCount = baseLevelArray.length;
			// 监控变化
			oRewardLevels.change(function() {
				baseLevelCount = parseInt(oRewardLevels.val());
				if (baseLevelCount < 1 || baseLevelCount > 10) {
					$(this).focus().val("");
					oPercentListContainer.empty();
				}
				baseLevelArray = defaultPercent[baseLevelCount - 1] || [];
				initPercentLists();
				initTotalPercent();
			});
			// 生成百分比输入表单
			var initPercentLists = function() {
				oPercentListContainer.empty();
				for (var i = 0; i < baseLevelCount; i++) {
					addInput(i + 1, baseLevelArray[i] || '');
				}
				oPercentListContainer.find('input').each(function(index) {
					var othis = $(this);
					othis.change(function() {
						var val = othis.val() - 0;
						baseLevelArray[index] = val;
						if (getPercentTotal() > 100 || val < 0) {
							baseLevelArray[index] = 0;
							othis.val("");
							othis.focus();
						}
						initTotalPercent();
					});
				});
			};
			// 生成总体比例
			var initTotalPercent = function() {
				oRewardPercent.val(baseLevelArray.join(":"));
				oRewardPercentTotal.val(getPercentTotal());
			};
			// 添加一个输入框
			var addInput = function(index, value) {
				var inputGroup = $("<div class='input-group percent-list'><div class='input-group-addon'>第 " + (index) + " 级分成百分比</div><input class=\"form-control\" type=\"text\" value='" + (value) + "' data-index='" + (index - 1) + "' placeholder=\"请输入一个1-100之间的数字\"><div class=\"input-group-addon\">%</div></div>");
				oPercentListContainer.append(inputGroup);
			};
			// 获取百分比总数
			var getPercentTotal = function() {
				var total = 0;
				$.each(baseLevelArray, function(key, val) {
					total += val * 1;
				});
				return total;
			};
			// 初始化
			oRewardLevels.val(baseLevelCount);
			oRewardPercentTotal.val(getPercentTotal());
			initPercentLists();
		};
		// 执行
		setPercent('#base_levels', '#base_percent');
		setPercent("#dealer_levels", "#dealer_percent");
	});
</script>

<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">
	$("#image_upload").uploadify({
		'multi': true,
		'buttonClass': 'margin-bottom',
		'fileSizeLimit': '200kb',
		'buttonText': '上传图片',
		'fileTypeDesc': 'Image Files',
		'fileTypeExts': '*.jpg; *.png',
		'swf': '__PUBLIC__/Style/Common/uploadify/uploadify.swf',
		'uploader': '__MODULE__/Upload/uploadOne',
		'onUploadStart': function() {},
		'onUploadSuccess': function(data, res) {
			var url = eval("(" + res + ")").extra.url;
			$("#logo").val(url);
		}
	});
	//经过图片路径文本框时显示预览图片
	var img = $("<img>");
	$("#logo").on("mouseover", function(e) {
		$(this).parent().css({
			"position": "relative"
		});
		$(img).attr("src", $(this).val());
		$(img).css({
			"position": "absolute",
			"top": 0,
			"left": "100%",
			"maxWidth": "200px"
		});
		$(img).appendTo($(this).parent());
	});
	$("#logo").on("mouseout", function(e) {
		$(img).remove();
	});
</script>